<template>
  <div>
    <el-dialog title="查看套餐详情" :visible.sync="modalShow" width="60%" :before-close="modalClose" center>
      <el-row class="margin-top">
        <el-col :span="6">编号：{{ billingData.no }}</el-col>
        <el-col :span="6">名称：{{ billingData.dataName }}</el-col>
        <el-col :span="6">分类：{{ billingData.classifyName }}</el-col>
        <el-col :span="6">拼音码：{{ billingData.pinyinCode }}</el-col>
      </el-row>
      <el-row class="margin-top">
        <el-col :span="6">套餐价格：{{ billingData.price }}</el-col>
        <el-col :span="6">折扣下限：{{ billingData.discount }}</el-col>
      </el-row>
      <el-row class="margin-top">
        <el-col :span="6">状态：{{ billingData.status }}</el-col>
        <el-col :span="6">创建人：{{ billingData.creator }}</el-col>
        <el-col :span="6">创建时间：{{ billingData.createdTime }}</el-col>
      </el-row>
      <div>
        <ul v-if="billingData.comboDetailDtoList && billingData.comboDetailDtoList.length>0">
          <li class="detailed">
            商品清单：
          </li>
          <li v-for="(items,i) of billingData.comboDetailDtoList" :key="i">
            <el-row style="width:95%">
              <el-row type="flex">
                <el-col :span="20" class="product">
                  <el-button class="bg" type="text">{{ items.type.split('类')[0] }}</el-button><span style="margin-left:10px;line-height:30px">{{ items.type === "项目类" ? items.productDto.name : items.materialMedicineDto.name }}</span>
                  <p style="margin:0px 10px;">{{ items.printName }}</p>
                </el-col>
                <el-col :span="2" :offset="2">
                  x {{ items.count }}
                </el-col>
              </el-row>
              <el-row class="grey" type="flex">
                <el-col :span="20">
                  <span>规格：{{ items.type === "项目类" ? items.productDto.specifications : items.materialMedicineDto.spec }}</span>
                  <span>单位：{{ items.type === "项目类" ? items.productDto.unit : items.materialMedicineDto.unit }}</span>
                  <span v-if="items.type === '项目类'">使用次数：{{ items.productDto.usageTimes }}</span>
                </el-col>
              </el-row>
              <el-row type="flex" class="price">
                <el-col :span="6">
                  售价：￥{{ items.comboPrice }} x {{ items.count }} = ￥{{ items.comboPrice * items.count }}
                </el-col>
                <el-col :span="5" :offset="8">
                  套餐折扣：{{ items.discount }}%
                </el-col>
                <el-col :span="5">
                  套餐金额：￥{{ items.comboPrice * items.discount / 100 }}
                </el-col>
              </el-row>
            </el-row>
          </li>
        </ul>
        <el-row>
          <el-col :offset="18" :span="6">总额：￥{{ billingData.originalPrice }}</el-col>
          <el-col :offset="18" :span="6">优惠：-￥{{ billingData.discountPrice }}</el-col>
          <el-col :offset="18" :span="6">合计：<span class="span">￥{{ billingData.price }}</span></el-col>
        </el-row>
      </div>
      <el-row type="flex" class="margin-top">
        <el-col :span="3" :offset="10">
          <el-button plain @click="modalClose">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    billingData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      modalShow: false,
    };
  },
  methods: {
    init() {
      this.modalShow = true;
    },
    modalClose() {
      this.modalShow = false;
    },
  },
};
</script>
<style scoped lang='scss'>
.margin-top{
margin-top: 30px;
}
.el-col-offset-8,.el-col-offset-2 {
  .el-button {
    margin-top: 15px;
    width: 100%;
    height: 40px;
  }
}
/deep/.el-form-item__content{
  margin-left: 50px !important;
}
  .span{
    color: #ff6600;
  }
  .grey{
    color: #aaaaaa;
  }
  .bg{
    background: #e4e4e4;
    width: 50px;
    height: 30px;
    text-align: center;
    border-radius: 10px;
    color: #666;
  }
  .product{
    display: flex;
  }
  .price{
    border-bottom: 1px solid #797979;
    padding-bottom: 10px;
    .el-col{
      display: flex;
    }
  }
  .el-row,span{
    line-height: 40px;
  }
  li{
    display: flex;
    margin-top: 5px;
  }
  .detailed{
    margin: 15px 0;
  }
  div>span{
    margin-right: 25px;
  }
</style>
